<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>

</head>

<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">


    <div class="col-sm-5">
        <h2>健身俱乐部助手在线管理系统</h2>
        <p>欢迎使用健身俱乐部助手在线管理系统</p>
        <br>
        <p style="color: red;font-size: 18px"><span>会员卡号&nbsp;:&nbsp; </span><span
                th:text="${sysUser.cardNumber}"></span></p>
        <p style="color: red;font-size: 18px"><span>到期时间&nbsp;:&nbsp; </span><span
                th:text="${#dates.format(sysUser.cardEndDate,'yyyy-MM-dd HH:mm:ss')}"></span></p>
    </div>
    <!--      扫码  -->
    <div class="col-sm-3">
        <input id="text" hidden="true" type="text" value="http://192.168.2.33/pay" style="width:80%"/><br/>
        <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

        <script type="text/javascript">
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 100,
                height: 100
            });

            function makeCode() {
                var elText = document.getElementById("text");

                if (!elText.value) {
                    elText.focus();
                    return;
                }

                qrcode.makeCode(elText.value);
            }

            makeCode();

            $("#text").on("blur", function () {
                makeCode();
            }).on("keydown", function (e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });
        </script>

        <a  href="#" style="font-size: 20px;margin-left: 10px">扫码充值</a>
    </div>

</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript">
    $('#pay-qrcode').click(function () {
        var html = $(this).html();
        parent.layer.open({
            title: false,
            type: 1,
            closeBtn: false,
            shadeClose: true,
            area: ['600px', '360px'],
            content: html
        });
    });
</script>
<!--  充值  -->
<script type="text/javascript">
    $("#recharge").click(function () {
        $.ajax({
            url: "/recharge", success: function (result) {
                console.log(result)
                window.location.reload()
            }
        });
    });
</script>
</body>
</html>
